var mostrar = false;
var mostrarNuevo = false;
var responder = true;
var respuesta = true;
var mostrarComentario = true;
var contenidoOriginal;

function esconderBotones(){
    
    $(".respuesta").css("display", "none");
    
}

function mostrarBotones(){
    
    $(".respuesta").css("display", "block");
    
}

function ocultarRespuesta(evt){
    
    window.location.href = "#Arriba";
    var elem = evt.target.parentNode.parentNode.parentNode.parentNode;
    elem.innerHTML = contenidoOriginal;
    mostrarBotones();
    
}

function mostrarRespuesta(evt){
    
    var id = evt.target.parentNode.parentNode.id;
    var elem = evt.target.parentNode.parentNode;
    
    contenidoOriginal = elem.innerHTML;
    responder = false;
    elem.innerHTML = "<a class = 'FLAG' name = 'Arriba'></a>" + elem.innerHTML + "<a class = 'FLAG' name = 'Abajo'></a>"
    + "<ul class = 'comentario'><br>"
    + "<div id = 'DIV_AreaRes'><label id = 'LBL_TituloRes' name = 'LBL_TituloRes'>Respuesta</label><br><br>"
    + "<form id = 'F_Respuesta' action = 'comentario.jsp' method 'POST'><input id = 'I_IDPadre' name = 'I_IDPadre' type='hidden'>"
    + "<textarea id = 'TXTA_Respuesta' name = 'TXTA_Respuesta' required = 'required'></textarea><br><br><button id = 'BTN_Responder' type = 'submit'>Responder</button>"
    + " <button id = 'BTN_CancelarRes' type = 'button' onclick = 'ocultarRespuesta(event);'>Cancelar</button></form></div></ul>";

    var txtarea = document.getElementById("TXTA_Respuesta");
    var divarea = document.getElementById("DIV_AreaRes");
    var idPadre = document.getElementById("I_IDPadre");

    idPadre.value = id;

    txtarea.style.width = divarea.offsetWidth;
    txtarea.style.height = divarea.offsetHeight;

    esconderBotones();

    window.location.href = "#Abajo";
                
}

$(document).on("ready", function(){
       
    var txtarea = document.getElementById("TXTA_Comentario");
    var divarea = document.getElementById("F_NuevoComentario");
       
    txtarea.style.width = divarea.offsetWidth;
    txtarea.style.height = divarea.offsetHeight;
       
    if(!respuesta){
        
        $(".respuesta").css("display", "none");
        $("#DIV_NuevoComentario").css("display", "none");
        mostrarComentario = false;
        
    }
    
    $("#DIV_Comentarios").css("display", "none");
    $("#DIV_Errores").css("display", "none");
    $("#DIV_NuevoComentario").css("display", "none");
    $("#F_NuevoComentario").css("display", "none");
    
    $("#BTN_MostrarNuevo").click(function(){
        
        var boton = document.getElementById("BTN_MostrarNuevo");
        
        if(!mostrarNuevo){
        
            $("#F_NuevoComentario").css("display", "none");
            boton.innerHTML = "Nuevo Comentario";
            mostrarNuevo = true;
            
        }
        
        else{
            
            $("#F_NuevoComentario").css("display", "block");
            boton.innerHTML = "Cancelar";
            mostrarNuevo = false;
            
        }
        
    });
            
    $("#BTN_MostrarComentarios").click(function(){
        
        var boton = document.getElementById("BTN_MostrarComentarios");
        
        if(!mostrar){
        
            $("#DIV_Comentarios").css("display", "block");
            $("#DIV_Errores").css("display", "block");
            boton.innerHTML = "Ocultar Comentarios";
            mostrar = true;
            
            if(mostrarComentario){
                
                $("#DIV_NuevoComentario").css("display", "block");
                
            }
            
        }
        
        else{
            
            $("#DIV_Comentarios").css("display", "none");
            $("#DIV_Errores").css("display", "none");
            $("#DIV_NuevoComentario").css("display", "none");
            boton.innerHTML = "Mostrar Comentarios";
            mostrar = false;
            
        }
        
    });
    
});
